<%@page import="java.util.ArrayList"%>
<%@page import="com.mconnect.msurvey.model.SurveyPlan"%>
<%@page import="com.mconnect.msurvey.controller.PlanManager"%>
<%@page import="java.util.List"%>
<%@page import="java.util.Set"%>
<%@page import="java.util.HashSet"%>
<%@page import="com.mconnect.msurvey.controller.UserManager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Admin Panel</title>
<link rel="stylesheet" type="text/css" href="resources/css/search_grid_style.css" />
<script src="js/jQuery/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript">
		$(function() {
		$('.ui-tabs-search .search-adv-button').click(function(){$('#search-adv-formCost').toggle();});
		$( "#datepicker1Cost" ).datepicker();
		$( "#datepicker2Cost" ).datepicker();
			
		$('#choosePlanCost').click(function(){
				
				var id_plan = $( "#rcost_id_plan" ).val();
				var dateFrom = $( "#datepicker1Cost" ).val();
				var dateTo = $( "#datepicker2Cost" ).val();
				$.get(
						'reports/costReportContent.jsp',
						{
							id_plan: id_plan, dateFrom : dateFrom, dateTo: dateTo
						},
						function (content) {
							$('#contentCost').html(content);
							
							return false;
						}
					);
			});
			
		});
</script>		
</head>
<body>
		<% PlanManager pM = new PlanManager();
					List<SurveyPlan> planList = new ArrayList<SurveyPlan>();
					planList = pM.getPlanList();
		%>
					<center>
						<div id="costBox" style=" margin-top: 20px; margin-bottom: 30px; width: 800px; font-size: 12px; ">
								
							<div id="page" class="ui-tabs ui-widget" style="width:800px;">
								<ul class="ui-tabs-nav ui-tabs-search">
									<li style="border: 0;  text-align: center;"><h3>Raport kosztów</h3></li>
									<li class="search-bottom">
										<span class="fll hint note request-time" style="margin-top: 9px;">Kampania</span>
										<a href="#" class="search-adv-button fll"><span class="ui-icon ui-icon-carat-1-s"></span></a>
										<select id="rcost_id_plan" name="id_plan"  style="float:left; margin-top: 7px; width:200px;">
										<% for(SurveyPlan plan : planList){ %> 
													<option value="<%=plan.getId_plan() %>"><%= plan.getPlanName() %></option>
										<%} %>	
										</select>
										<a href="#" id="choosePlanCost" class="search-button fll"><span class="ui-icon ui-icon-search"></span></a>
									</li>
								</ul>
								<div class="clear"></div>
								<div id="search-adv-formCost" class="form search-form" style="display:none">
									<div class="wide">
										<table >
											<tr>
												<td><label class="note" style="margin-top:3px;">Data</label></td>
												<td><input type="text" id="datepicker1Cost" ></td>
												<td>-</td>
												<td><input type="text" id="datepicker2Cost" ></td>
											</tr>
										</table>
									</div>
								</div>
								<div class="clear"></div>
								<div class="search-label"></div>
								<div class="clear"></div>
								<div id="paging_container" class="container">
								<div id="reload" class="ui-overlay" style="display: none;"><div class="ui-widget-overlay"></div></div>
									
									<div class="clear"> </div>
									<div class="info_text hint note fll"> </div>
									<div class="page_navigation frr"> </div>
								</div>
								<div class="clear"></div>
							</div><!-- page -->
						</div>
						
						<div id="contentCost" >
						
						</div>
				</center>
		
</body>
</html>